<template>
  <View>
    <search></search>

    <view class="cate">
      <!-- 左侧 -->
      <Scroll-view scroll-y class="cate-left">
        <block v-for="(item,index) in leftData" :key="index">
           <!-- :class="{active == tabIndex}" -->
          <view class="cate-left-item" :class="{active:index == tabIndex}" @tap="changeTabIndex(index)">
            {{item.cat_name}}
          </view>
        </block>
      </Scroll-view>
      <!-- 右侧 -->
      <Scroll-view scroll-y class="cate-right"> 
        <block v-for="(items,index) in rightData.children" :key="index">
          <view class="floor">
            <View class="floor-head">
              {{items.cat_name}}
            </View>
            <View class="floor-body">
              <block v-for="(subItem,subIndex) in items.children" :key="subIndex">
                <view class="floor-body-item" @tap="goToList(subItem.cat_name)">
                   <image :src="'https://autumnfish.cn/wx/'+subItem.cat_icon"></image>
                  <view >{{subItem.cat_name}}</view>
                </view>
              </block>
            </View>
          </view>
        </block>
      </Scroll-view>
    </view>
  </View>
</template>
 
<script>
import {getCategories} from '@/api'
import Search from '@/components/search';
import request from '@/utils/request';
export default {
  components: {
    Search
  },
  data () {
    return {
      leftData:[],
      rightData:[],
      tabIndex:0
    }
  },
  methods: {
    // 点击切换tab栏 
    changeTabIndex(index){
      this.tabIndex = index;
      this.rightData = [];
      setTimeout(() => {
        this.rightData = this.leftData[index];
      }, 0);
    },

    goToList(name){
      wx.navigateTo({
        url:'/pages/goodsList/main'+'?keyword='+ name
        
      })
    }
  },
  mounted () {
    getCategories()
      .then(res =>{
        console.log(res);
        let message = res.data.message;
        this.leftData = message;
        this.rightData = message[0];
      })
  }
}
</script>

<style lang="scss">
  .cate{
    background-color: pink;
    position: fixed;
    // width: 100%;
    // height: 100%;
    left:0;
    right:0;
    top:98rpx;
    bottom:0;
    display: flex;
    &-left{
      background-color:#f4f4f4;
      width: 200rpx;
      height: 100%;
      &-item{
        line-height: 100rpx;
        text-align: center;
        font-size:28rpx;
        &.active{
          color:red;
          background-color: #fff;
          position: relative;
          &::before{
            content: "";
            background-color: red;
            position: absolute;
            left:0;
            width: 7rpx;
            top:15rpx;
            bottom:15rpx;
          }
        }
      }
    }
    &-right{
      background-color:#fff;
      flex:1;
      height: 100%;
      .floor{
        &-head{
          text-align: center;
          font-size:28rpx;
          padding: 20rpx 0;
          &::before,&::after{
            content:'/';
            color:#ccc;
          }
        }
        &-body{
          display: flex;
          flex-wrap: wrap;
          &-item{
            width: 33.33%;
            text-align: center;
            padding: 10rpx 0;
            image{
              width: 120rpx;
              height:90rpx;
            }
            view{
              font-size:24rpx;
            }
          }
        }
      }
    }
  }
</style>
